// 从服务器拿到数据
// 渲染页面
// 把商品数量进行修改
// 把购物车的数字通过从服务器拿到数据进行渲染
let num = 0
async function render() {
    const res = await axios({
        url: '/cart/list',
    })

    console.log(res.data.data.list)


    document.querySelector('.items').innerHTML = res.data.data.list.map(ele => {

        num += ele.goods_num * ele.goods.goods_price_max
        // document.querySelector('.total span').innerText = num


        return `
        <div class="item">
        <input type="checkbox" name="checkboxs"  class="checkbox" data-id="${ele.goods.goods_price_max}" />
        <img src="${ele.goods.goods_image}" alt="" />
        <div class="info">
          <h3 class="ellipsis-2">${ele.goods.goods_name}</h3>
          <div class="bottom">
            <div class="price">￥<span>${ele.goods.goods_price_max}</span></div>
            <div class="num" data-id="${ele.goods_id}" data-ie="${ele.goods_sku_id}" data-i="${ele.goods_num}">
              <button class="decrease">-</button>
              <span>${ele.goods_num}</span>
              <button class="add">+</button>
            </div>
          </div>
        </div>
      </div>
        `
    }).join('')

    document.querySelector('.title .left span').innerText = res.data.data.list.length

    const res1 = await axios({
        url: '/cart/total',
    })
    console.log(res1)

    document.querySelector('footer .active i').innerText = res1.data.data.cartTotal



}
render()
// 给渲染模块注册事件委托
// 判断+ 和 - 这个类名是否存在 如果存在就让span标签++
// 点击 + 的购物车商品更新
// 点击 - 的购物车商品更新
// 点击复选框的时 如果复选框选中时把价格添加到合计里面 如果没有选中就不添加


const pay = document.querySelector('.pay')
document.querySelector('.items').addEventListener('click', async function (e) {



    if (e.target.classList.contains('add')) {
        // console.log(12)
        if (e.target.previousElementSibling) {

            let ele = e.target.previousElementSibling.innerText++
            // e.target.parentNode.dataset.i + ele
            // console.log(++e.target.parentNode.dataset.i)

            const res2 = await axios({
                method: 'post',
                url: '/cart/update',
                data: {
                    goodsId: e.target.parentNode.dataset.id,
                    goodsSkuId: e.target.parentNode.dataset.ie,
                    goodsNum: ++e.target.parentNode.dataset.i
                }
            })
            console.log(res2)

            document.querySelector('footer .active i').innerText = res2.data.data.cartTotal

            console.log(e.target.parentNode.dataset.id)
            // console.log(e.target.parentNode.dataset.ie)
            // console.log(e.target.parentNode.dataset.i)

        }
    }
    if (e.target.classList.contains('decrease')) {
        // console.log(132)
        if (e.target.nextElementSibling.innerText == 1) {
            e.target.nextElementSibling.innerText = 1
        } else {
            e.target.nextElementSibling.innerText--

            const res2 = await axios({
                method: 'post',
                url: '/cart/update',
                data: {
                    goodsId: e.target.parentNode.dataset.id,
                    goodsSkuId: e.target.parentNode.dataset.ie,
                    goodsNum: --e.target.parentNode.dataset.i
                }
            })
            console.log(res2)
            document.querySelector('footer .active i').innerText = res2.data.data.cartTotal
        }
    }

    if (e.target.classList.contains('checkbox')) {
        console.log(e.target.dataset.id)
        // console.log(123)
        let a = 0
        let sum = 0
        const checkboxes = document.querySelectorAll('.checkbox')
        checkboxes.forEach(ele => {
            if (ele.checked) {
                a = 1
            } else {

            }

            document.querySelector('.total span').innerText = num
            pay.disabled = ""
            if (checkboxes.checked === false || checkAll.checked === false) {
                pay.disabled = true
                document.querySelector('.total span').innerText = '0.00'
            }
            const addchecked = Array.from(checkboxes).every((checkbox) => checkbox.checked)
            checkAll.checked = addchecked

        })

        if (a) {
            document.querySelector('.pay').disabled = ""
            document.querySelector('.total span').innerText = e.target.dataset.id

        } else {
            document.querySelector('.pay').disabled = true
        }
    }
})

const checkAll = document.querySelector('.checkAll')

checkAll.addEventListener('change', function () {
    const checkboxes = document.querySelectorAll('.items .checkbox');

    checkboxes.forEach(element => {
        // console.log(123)
        element.checked = checkAll.checked
        document.querySelector('.total span').innerText = num
        pay.disabled = ""
        if (checkboxes.checked === false || checkAll.checked === false) {
            pay.disabled = "true"
            document.querySelector('.total span').innerText = '0.00'

        }
    })


})




document.querySelector('.right').addEventListener('click', function () {
    // console.log(123)
    this.innerText = '完成'
    this.style.color = 'red'
    document.querySelector('.pay').innerText = '删除'
    // console.log(123)
})

